Building Your First AI Chatbot 🤖

Using MIT App Inventor

Grades 10-12 | AI & Mobile Development

Setup: Your Credentials 🔑

MIT App Inventor Project Link

                            https://ai2.appinventor.mit.edu
                        

Get Your Gemini Free API Key 🔑

Follow these steps to get your own free Gemini API key:

Go to aistudio.google.com/apikey
Sign in with your Google account (create one if you don't have)
Click on "Create API Key" button
Select "Create API Key in new project" option
Copy the API Key that appears
Paste it into your MIT App Inventor chatbot project
Save your API key in a safe place (never share it!)

⚠️ Important: Keep your API key private! Never share it in public repositories or with others.

Wi-Fi Network

                            LNS-G11-G12
                        

Password:

                            ManagE@1941@
                        

💡 Tip: These credentials are already loaded. You'll use them when building your app blocks. Keep them safe!

What is a Chatbot? 💬

A chatbot is a computer program that simulates human conversation through text or voice interactions.

Real-World Examples:

Siri, Alexa, customer service bots, ChatGPT, virtual assistants on websites

Why are they useful?

24/7 availability, instant responses, handle multiple conversations, automate repetitive tasks

What is MIT App Inventor? 📱

Visual Programming Platform

Created by MIT to help anyone build mobile apps without traditional coding experience

Block-Based Coding

Drag and drop blocks like puzzle pieces to create app logic and functionality

AI Components

Built-in AI features like ChatBot, speech recognition, and image classification

Our Chatbot App Design 🎨

Screen1

Simple, clean interface with speech input/output and AI conversation

Components We'll Use 🔧

User Interface

speakButton - Button to start voice input
sendButton - Button to send to AI
readButton - Button to read response aloud
speakTextBox - Display what user said
responseTextBox - Display AI response

AI & Voice Components

SpeechRecognizer1 - Converts speech to text
TextToSpeech1 - Reads text aloud
ChatBot1 - Gemini AI conversation engine
Notifier1 - Shows progress dialogs

💡 Tip: All these components can be found in the Designer view's Palette on the left side

Block 1: Speak Button Click 🎤

The Code:

when speakButton.Click
do SpeechRecognizer1.GetText

What does this do?

When the user clicks the "SPEAK" button, it activates the phone's speech recognition to listen to what they say.

Real-world analogy:

Like pressing a microphone button to start recording your voice - the app is now listening!

Block 2: After Getting Speech 📝

The Code:

when SpeechRecognizer1.AfterGettingText
  do set speakTextBox.Text to result
     set responseTextBox.Text to ""
     call ChatBot1.Converse
         question: speakTextBox.Text

What does this do?

After speech is converted to text, this block:

1. Displays what you said in the speakTextBox
2. Clears the previous response (makes it empty)
3. Sends your question to the Gemini AI chatbot

Block 3: Send Button Click ✉️

The Code:

when sendButton.Click
  do if speakTextBox.Text is not empty
     then call Notifier1.ShowProgressDialog
              message: "Generating a response"
              title: "Please wait..."
              call ChatBot1.Converse
                 question: speakTextBox.Text

What does this do?

When clicking "SEND TO GEMINI":

1. Checks if there's actually text to send
2. Shows a "Please wait..." dialog while AI thinks
3. Sends the question to the chatbot

Block 4: After AI Responds 🤖

The Code:

when ChatBot1.GotResponse
do call Notifier1.DismissProgressDialog
set responseTextBox.Text to get response

What does this do?

When Gemini AI finishes thinking and responds:

1. Closes the "Please wait..." dialog
2. Displays the AI's response in the responseTextBox

Think of it as:

Like waiting for a friend to text back - when they reply, you see their message!

Block 5: Read Button Click 🔊

The Code:

when readButton.Click
do call TextToSpeech1.Speak
message: responseTextBox.Text

What does this do?

When clicking the "READ" button, it uses text-to-speech to read the AI's response out loud.

Complete the conversation loop!

Now you can have a fully voice-based conversation: speak your question, get a text response, and have it read back to you!

The Complete Flow 🔄

1. User clicks SPEAK

Phone starts listening to what you say

2. User speaks

Speech is converted to text, then automatically sent to AI

3. AI processes your question

"Please wait..." dialog shows, Gemini generates response

4. Response arrives

Dialog closes, AI's response is displayed on screen

5. User clicks READ

Response is spoken aloud through text-to-speech!

Let's Build It Together! 🚀

Step 1: Design View

Add all the buttons and text boxes to match the design

Step 2: Add Components

Add the invisible components (SpeechRecognizer, TextToSpeech, ChatBot, Notifier)

Step 3: Blocks View

Build the 5 code blocks we just learned about!

Excellent Work! 🎉

Building the Future with AI

Stay curious. Think critically. Build responsibly. ✨

Questions? Insights? Debates?

Let's discuss! 💬

Ready to create amazing AI applications? 🚀